<template>
  <div class="home">
    <van-tabs v-model="active">
      <van-tab v-for="item in channels" :key="item.id" :title="item.name">
        <ArticleList :channel="item" @showMore="showMoreFn" />
      </van-tab>
    </van-tabs>
    <van-popup v-model="isShow" :style="{ width: '80%' }">
      <MoreAction ref="moreAction" @dislike="dislikeFn" @getReportActicle="getReportActicleFn" />
    </van-popup>
    <div class="bar-btn" @click="showChannelEdit">
      <van-icon name="wap-nav" />
    </div>
    <van-action-sheet v-model="isShowChannelEdit" title="标题">
      <ChannelEdit ref="changeEditing" :active="active" @changeChannel="changeChannelFn" @update-active="updateActive" />
    </van-action-sheet>
  </div>
</template>
<script>
import { mapActions, mapState } from 'vuex'
import ChannelEdit from './commponents/channelEdit.vue'
import ArticleList from './commponents/article.vue'
import MoreAction from './moreAction.vue'
// import { reqChannels } from '@/api/home'
import { rqeDislike } from '@/api/disLike'
import { reqReportArticle } from '@/api/articleList'
export default {
  components: {
    ArticleList,
    MoreAction,
    ChannelEdit
  },
  data() {
    return {
      active: 0,
      // channelList: [],
      // list: [],
      loading: false,
      finished: false,
      isShow: false,
      articleId: '',
      isShowChannelEdit: false
    }
  },
  computed: {
    ...mapState('channels', ['channels'])
  },
  created() {
    this.getChannelList()
    // const { data: { channels }} = await reqChannels()
    // this.channelList = channels
    // console.log(channels)
  },
  methods: {
    ...mapActions('channels', ['getChannelList']),
    showMoreFn(id) {
      this.isShow = true
      this.articleId = id
      this.$nextTick(() => {
        this.$refs.moreAction.isReport = false
      })
      console.log(this.articleId)
    },
    // 不感兴趣======================================
    async dislikeFn() {
      const res = await rqeDislike(this.articleId)
      console.log(res)
      this.isShow = false
      const obj = {
        channelsId: this.channelList[this.active].id,
        articleId: this.articleId
      }
      this.$eventbus.$emit('del-article', obj)
    },
    // 举报=====================
    async getReportActicleFn(typeId) {
      const res = await reqReportArticle(this.articleId, typeId)
      console.log(res)
      this.isShow = false
      const obj = {
        channelsId: this.channelList[this.active].id,
        articleId: this.articleId
      }
      this.$eventbus.$emit('del-article', obj)
    },
    showChannelEdit() {
      this.isShowChannelEdit = true
      this.$nextTick(() => {
        this.$refs.changeEditing.Editing = false // 需在this.$nextTick执行
      })
    },
    changeChannelFn(index) {
      this.active = index
      this.isShowChannelEdit = false
    },
    updateActive(index) {
      this.active = index
      console.log(index)
    }
  }
}
</script>
<style lang="scss" scoped>
// 加了scoped, 样式, 只会作用于当前组件模板
// 深度作用选择器 ::v-deep (sass)  /deep/ (less)  >>> (css)
.home {
height: 100vh;
padding-top: 46+44px;
padding-bottom: 50px;
box-sizing: border-box;
  ::v-deep {
    .van-tabs__line {
    background-color: #3196fa;
  }
  .van-tabs__wrap{
    position: fixed;
    top: 46px;
    right: 30px;
    left: 0;
  }
  .van-tabs{
    height: 100%;
    .van-tabs__content{
    height: 100%;
    .van-tab__pane{
      height: 100%;
      overflow: auto;
    }
  }
  }
.bar-btn {
  position: fixed;
  right: 5px;
  top: 57px;
  display: flex;
  align-items: center;
  background-color: #fff;
  opacity: 0.8;
  z-index:1;
  .van-icon-wap-nav{
    font-size: 20px;
  }
}
  }
}
</style>
